<div class="m-player">
    <div class="lock">
        <div class="left"><i></i></div>
    </div>
    <div class="hand"></div>
    <div class="container">
        <div class="wrap">
            <div class="btns">
                <i class="prev"></i>
                <i class="toggle"></i>
                <i class="next"></i>
            </div>
            <div class="head">
                <img />
                <i class="mask"></i>
            </div>
            <div class="play">
                <div class="words clearfix">
                    <p class="ellipsis margin-bottom-none"> </p>
                    <ul class="songs clearfix margin-bottom-none">
                        <li>
                            <a> </a>
                            <span>/</span>
                        </li>
                    </ul>
                </div>
                <div class="bar">
                    <div class="slider-wrap">
                        <app-wy-slider></app-wy-slider>
                    </div>
                    <span class="time">
            <em>02:11/04:40 </em>  
          </span>
                </div>
            </div>

            <div class="oper">
                <i class="like" title="收藏"></i>
                <i class="share" title="分享"></i>
            </div>
            <div class="ctrl">
                <i class="volume" title="音量"></i>
                <i></i>
                <p nz-tooltip>
                    <span></span>
                </p>

                <div class="control-vol">
                </div>
            </div>

        </div>
    </div>



    <audio #audio>
  </audio>
</div>
<!-- 
<div class="m-player" [@showHide]="showPlayer" appClickoutside [bindFlag]="bindFlag" (onClickOutSide)="onClickOutSide($event)" (mouseenter)="togglePlayer('show')" (mouseleave)="togglePlayer('hide')" (@showHide.start)="animating = true" (@showHide.done)="onAnimateDone($event)">
    <div class="lock" (click)="isLocked = !isLocked">
        <div class="left"><i [class.locked]="isLocked"></i></div>
    </div>
    <div class="hand"></div>
    <div class="container">
        <div class="wrap">
            <div class="btns">
                <i class="prev" (click)="onPrev(currentIndex - 1)"></i>
                <i class="toggle" [class.playing]="playing" (click)="onToggle()"></i>
                <i class="next" (click)="onNext(currentIndex + 1)"></i>
            </div>
            <div class="head">
                <img [src]="picUrl" />
                <i class="mask" (click)="toInfo(['/songInfo', currentSong && currentSong.id])"></i>
            </div>
            <div class="play">
                <div class="words clearfix">
                    <p class="ellipsis margin-bottom-none" (click)="toInfo(['/songInfo', currentSong.id])">{{currentSong?.name}}</p>
                    <ul class="songs clearfix margin-bottom-none">
                        <li *ngFor="let item of currentSong?.ar; last as isLast">
                            <a (click)="toInfo(['/singer', item.id])">{{item.name}}</a>
                            <span [hidden]="isLast">/</span>
                        </li>
                    </ul>
                </div>
                <div class="bar">
                    <div class="slider-wrap">
                        <app-wy-slider [bufferOffset]="bufferPercent" [(ngModel)]="percent" (wyOnAfterChange)="onPercentChange($event)"></app-wy-slider>
                    </div>
                    <span class="time">
            <em>{{currentTime | formatTime}}</em> / {{duration | formatTime}}
          </span>
                </div>
            </div>

            <div class="oper">
                <i class="like" title="收藏" (click)="onLikeSong(currentSong.id.toString())"></i>
                <i class="share" title="分享" (click)="onShareSong(currentSong)"></i>
            </div>
            <div class="ctrl">
                <i class="volume" title="音量" (click)="toggleVolPanel()"></i>
                <i [ngClass]="currentMode.type" [title]="currentMode.label" (click)="changeMode()"></i>
                <p nz-tooltip [nzTitle]="controlTooltip.title" [nzVisible]="controlTooltip.show" nzOverlayClassName="tip-bg" class="open" (click)="toggleListPanel()">
                    <span></span>
                </p>

                <div class="control-vol" [hidden]="!showVolumnPanel">
                    <app-wy-slider [wyVertical]="true" [(ngModel)]="volume" (ngModelChange)="onVolumeChange($event)"></app-wy-slider>
                </div>
            </div>
            <app-wy-player-panel [playing]="playing" [songList]="songList" [currentSong]="currentSong" [show]="showPanel" (onChangeSong)="onChangeSong($event)" (onClose)="showPanel = false" (onDeleteSong)="onDeleteSong($event)" (onClearSong)="onClearSong()" (onToInfo)="toInfo($event)"
                (onLikeSong)="onLikeSong($event)" (onShareSong)="onShareSong($event)">
            </app-wy-player-panel>
        </div>
    </div>



    <audio #audio [src]="currentSong?.url" (canplay)="onCanplay()" (timeupdate)="onTimeUpdate($event)" (ended)="onEnded()" (error)="onError()">
  </audio>
</div> -->